import React, { CSSProperties, FC } from 'react'
import styled from "styled-components"
interface ITitle {
    name?:string
}

const Title = styled.div`
      position: relative;
      padding-top:${(props)=>props.style?.paddingTop?props.style?.paddingTop:'1rem'};
      text-align: left;
      color:#fff;
      height: 3.6rem;
      font-family: 'YouSheBiaoTiHei';
      font-style: italic;
      font-size: 1.8rem;
      font-weight:bold;
    :after{
      content: "";
      color:#fff;
      font-weight: bold;
      display: inline-block;
      position: absolute;
      width: 24rem;
      height: 3.6rem;
      line-height:3.6rem;
      margin-left: 1rem;
      background: linear-gradient(90deg, #1AABFF 0%, rgba(26, 171, 255, 0) 100%);
      opacity: 0.35;
    }
    .title-span{
      color:#fff;
      font-weight: bold;
      display: inline-block;
      position: absolute;
      margin-left: 3rem;
      line-height:3.6rem;
    }
`

const Content: FC<ITitle&{style?:CSSProperties}> = function (props) {

    return (
        <Title style={props.style}><div className='title-span'>{props.name}</div></Title>
    )
}

export default Content
